<template>
    <page-meta :page-style="'overflow:' + (pageshow ? 'hidden' : 'visible')"></page-meta>
    <view class="page">
        <view class="context" v-if="comment">
            <item :style="{ width: '100%' }" :data="comment"></item>
            <view class="header-avatar">
                <view>
                    <uv-avatar
                        src="https://mxzj-translate.oss-cn-chengdu.aliyuncs.com/catv2/appfile/image/img/%E4%BA%BA%E5%B7%A5%403x.png"
                        size="24" shape="square"></uv-avatar>
                </view>
                <view class="header_right">
                    <view class="top">
                        <view>{{ $t('鉴定') }} </view>
                    </view>
                </view>
            </view>
            <view class="changeisfeedback mb3">
                <uv-checkbox-group labelColor="#000000">
                    <uv-checkbox activeColor="#FD754C" :customStyle="{ marginBottom: '8px' }" :label="$t('设置本条为无需关注')"
                        :name="true" @change="(e: boolean) => isbad = e" :checked="!!isbad"></uv-checkbox>
                </uv-checkbox-group>
            </view>
            <view class="changeisfeedback mb3">
                <uv-checkbox-group labelColor="#000000">
                    <uv-checkbox activeColor="#FD754C" :customStyle="{ marginBottom: '8px' }" :label="$t('设置本条为差评翻转')"
                        :name="true" @change="(e: boolean) => isbadreversal = e" :checked="!!isbadreversal"></uv-checkbox>
                </uv-checkbox-group>
            </view>
            <view class="changeisfeedback mb3">
                <uv-checkbox-group labelColor="#000000">
                    <uv-checkbox activeColor="#FD754C" :customStyle="{ marginBottom: '8px' }" :label="$t('设置本条需要门店反馈')"
                        :name="true" @change="changeisfeedback" :checked="!!form.isfeedback"></uv-checkbox>
                </uv-checkbox-group>
            </view>
            <view class="identifylabelids">
                <view @click="popupref?.open()" class="open">
                    <view>
                        {{ $t('鉴定评价标注') }}
                    </view>
                    <view>
                        <uv-icon size="14" name="arrow-right"></uv-icon>
                    </view>
                </view>
                <view class="identifylabelids-button">
                    <view v-for="( v, i ) in  form.identifylabelids" :key="i" class="identifylabelids-button-item">
                        <uv-tags bgColor="#748ee2" borderColor="#748ee2" color="#ffffff" closable
                            :text="$t(String(identifylabel.find(c => c.id === v)?.name))"
                            @close="form.identifylabelids?.splice(i, 1)">
                        </uv-tags>
                    </view>
                </view>
            </view>
            <view class="identifylabelids">
                <view @click="popupref2?.open()" class="open">
                    <view>
                        {{ $t('通知用户') }}
                    </view>
                    <view>
                        <uv-icon size="14" name="arrow-right"></uv-icon>
                    </view>
                </view>
                <view class="identifylabelids-button">
                    <view v-for="( v, i ) in  noticeuser" :key="i" class="identifylabelids-button-item">
                        <uv-tags plain bgColor="#ffffff" borderColor="#748ee2" color="#748ee2" closable
                            :text="users.find(c => c.id === v.id)?.name" @close="noticeuser?.splice(i, 1)">
                        </uv-tags>
                    </view>
                </view>
            </view>
            <view>
                <uv-button @click="submit" :custom-style="submitButton">{{ $t('确定') }}</uv-button>
            </view>
            <uni-popup ref="popupref" type="bottom" @change="popupchange">
                <view class="popuplabel">
                    <identifylabelselect v-model="form.identifylabelids" multiple @submit="popupref?.close">
                    </identifylabelselect>
                </view>
            </uni-popup>
            <uni-popup ref="popupref2" type="bottom">
                <view class="popuplabel">
                    <selectUserVue ref="selectUser" @close="() => popupref2.close()" v-model="noticeuser" multiple>
                    </selectUserVue>
                </view>
            </uni-popup>
        </view>
    </view>
</template>

<script setup lang="ts">
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
import identifylabelselect from '../../components/identifylabel/identifylabelselect.vue'
import selectUserVue from '../../components/user/selectuser.vue'
import { ref } from 'vue';
import api, { apiget } from '@/api';
import { useI18n } from 'vue-i18n';
import dayjs from 'dayjs';
import { submitButton } from '@/util/style';
import { assign } from 'lodash-es';
import { watch } from 'vue';
import item from '@/components/comment/item.vue';

const pageshow = ref(false)
const popupref2show = ref(false)
const $t = useI18n().t
const id = ref()
const feedbackTime = ref()
const identifylabel = ref<Eps.identifylabelEntity[]>([])
onLoad((query) => {
    id.value = query?.id
    if (!id.value) {
        uni.navigateBack()
        return
    }
    apiget<Eps.BaseUserCommentEntity>('/wechat/comment/info?id=' + id.value).then(e => {
        comment.value = e
        isbad.value = comment.value.isbad
        isbadreversal.value = comment.value.isbadreversal
        feedbackTime.value = comment.value.feedbackTime
        if (e.identifycomment) {
            apiget<Eps.identifycommentEntity>('/wechat/identifycomment/info?id=' + e.identifycomment.id).then(c => {
                form.value = assign(form.value, c)
                form.value.identifylabelids = c.identifycommentlabel?.map(e => {
                    return String(e.identifylabel?.id)
                })
                noticeuser.value = form.value.noticeuser || []
            })
        }
        commentlabel.value = comment.value.commentlabel || []
    }).catch(f => {
        uni.showToast({
            icon: 'error',
            title: f,
            duration: 2000
        });
    })
    api<Eps.identifylabelEntity[]>('/wechat/identifylabel/list').then(e => {
        identifylabel.value = e
    }).catch(f => {
        uni.showToast({
            icon: 'error',
            title: f,
            duration: 2000
        });
    })
})

const comment = ref<Eps.BaseUserCommentEntity>()


const popupref = ref()
const popupref2 = ref()

const commentlabel = ref<string[]>([])
const noticeuser = ref<Eps.TenantUserEntity[]>([])
const isbad = ref()
const isbadreversal = ref()
const selectUser = ref()
const users = ref<Eps.TenantUserEntity[]>([])


watch(() => selectUser.value?.list, e => {
    users.value = selectUser.value?.list || []
})

const form = ref<Eps.identifycommentEntity>({
    identifylabelids: [],
    isfeedback: 0
})

onPullDownRefresh(() => {
    apiget<Eps.BaseUserCommentEntity>('/wechat/comment/info?id=' + id.value).then(e => {
        comment.value = e
        isbad.value = comment.value.isbad
        isbadreversal.value = comment.value.isbadreversal
        feedbackTime.value = comment.value.feedbackTime
        if (e.identifycomment) {
            apiget<Eps.identifycommentEntity>('/wechat/identifycomment/info?id=' + e.identifycomment.id).then(c => {
                form.value = assign(form.value, c)
                noticeuser.value = form.value.noticeuser || []
            })
        }
        commentlabel.value = comment.value.commentlabel || []
    }).catch(f => {
        uni.showToast({
            icon: 'error',
            title: f,
            duration: 2000
        });
    })
})

function submit() {


    if (!form.value.identifytime) {
        form.value.identifytime = new Date
        form.value.identifytimeconsuming = form.value.create_time ? dayjs(form.value.identifytime).unix() - dayjs(form.value.create_time).unix() : dayjs().unix() - dayjs(comment.value?.feedbackTime).unix()

    }

    if (!form.value.isfeedback) {
        if (!form.value.completetime) {
            form.value.completetime = new Date
        }
    }
    if(!form.value.feedbacktime1 && form.value.isfeedback){
        form.value.feedbacktime1 = new Date
    }

    if (comment.value?.id) {
        form.value.id = comment.value.identifycomment?.id
    }
    if (!form.value.id) {
        form.value.issystem = 0
    }

    form.value.comment = {
        id: id.value,
        userremarkstime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        commentlabel: commentlabel.value,
        isbad: isbad.value,
        isbadreversal: isbadreversal.value,
    }

    api('/wechat/identifycomment/add', assign(form.value, {
        noticeuser: noticeuser.value
    })).then(() => {
        uni.showToast({
            title: $t('鉴定完成'),
            duration: 2000,
        });
        uni.navigateBack()
    }).catch(f => {
        uni.showToast({
            title: $t('鉴定失败'),
            duration: 2000,
            icon: 'error'
        });
        console.log(f)
    })
}

function popupchange(e: { show: boolean, type: string }) {
    pageshow.value = e.show
}



function changeisfeedback(e: boolean) {
    form.value.isfeedback = e ? 1 : 0
}

</script>

<style scoped lang="scss">
.context {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 12rpx;
    font-size: 28rpx;
    color: #000000;



    .identifylabelids {
        margin-top: 28rpx;
        margin-bottom: 28rpx;
        background-color: rgba(242, 244, 250, 0.4);
        border-radius: 8px;
        width: 96vw;

        .open {
            display: flex;
            flex-wrap: wrap;
            padding: 24rpx;
            justify-content: space-between;
            border-bottom: 1rpx solid #E6E6E6;
            font-size: 28rpx;
        }

        .identifylabelids-button {
            min-height: 160rpx;
            display: flex;
            flex-wrap: wrap;
            padding-left: 12rpx;
            padding-right: 12rpx;

            .identifylabelids-button-item {
                flex: none;
            }

        }
    }

    .changeisfeedback {
        width: 88vw;
    }

    .header-avatar {
        display: flex;
        flex-wrap: wrap;
        gap: 12rpx;
        width: 96vw;
        margin-top: 24rpx;
        margin-bottom: 24rpx;


        .header_right {
            flex: 1;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: center;

            .top {
                height: 43rpx;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                font-weight: 600;
                color: #000;
                font-size: 32rpx;
            }


        }
    }
}

.popuplabel {
    height: 65vh;
    overflow-y: scroll;
    background-color: $uni-bg-color;
}
</style>